<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>

    <!-- 
      DIFF 比较：

        Vue 在初始化的时候，会使用数据与模板进行解析。生成一份虚拟DOM对象，然后通过这份虚拟DOM对象去映射到真实的DOM上。
        当数据发生变化，Vue会使用新的数据与模板进行解析，生成一份新的虚拟DOM对象，然后会将新旧两份虚拟DOM对象做diff比较，计算出
        最小的变化点，采用最小的代价去更新真实DOM


      虚拟DOM：
        概念：本质上是一个JS对象。用来描述一个真实DOM的样子。

        示例：
          1. 
            <div id="box" class="c1">我的天</div>

            {
              type: 'div',
              attrs: {
                id: 'box',
                class: 'c1'
              },
              children: '我的天'
            }
          
          2.
            <div>
              <p>皮</p>
              <button>按钮</button>
            </div>

            {
              type: 'div',
              children: [
                { type: 'p', children: '屁' },
                { type: 'button', children: '按钮' }
              ]
            }

            {
              type: 'div',
              children: [
                { type: 'p', children: '花' },
                { type: 'button', children: '按钮' }
              ]
            }

     -->

    <div id="app">
      <button @click="handleClick('unshift')">头部添加</button>
      <button @click="handleClick('push')">尾部添加</button>
      <hr />
      <h2>未使用key或者使用index作为key</h2>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{item.name}} - {{item.age}}
          <input type="text" />
        </li>
      </ul>

      <hr />
      <!-- <h2>使用id作为key</h2>
      <ul>
        <li v-for="item in list" :key="item.id">
          {{item.name}} - {{item.age}}
          <input type="text" />
        </li>
      </ul> -->
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

      createApp({
        data() {
          return {
            list: [
              { id: "001", name: "张三", age: 18 },
              { id: "002", name: "李四", age: 19 },
              { id: "003", name: "王五", age: 20 },
            ],
          };
        },

        methods: {
          handleClick(type) {
            const obj = { id: "004", name: "马六", age: 21 };

            this.list[type](obj);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
